<template>
  <footer class="confirm-order-footer" v-if="orderInfo.cart">
    <div class="left">
      <span>待支付 ¥</span>
      <span>{{ orderInfo.cart.total }}</span>
    </div>
    <div class="right" @click="handlePlaceOrder">确认下单</div>
  </footer>
</template>

<script>
export default {
  props: {
    orderInfo: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  methods: {
    handlePlaceOrder() {
      const user_id = localStorage.getItem("user_id");
      if (user_id) {
        this.$emit("handlePlaceOrder", user_id);
      } else {
        this.$toast.handleTipsText("请登录");
      }
    },
  },
};
</script>
<style lang="less" scoped>
.confirm-order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 46px;
  color: #fff;
  overflow: hidden;
  .left {
    flex: 1;
    padding: 20px;
    background-color: #3c3c3c;
  }
  .right {
    display: inline-block;
    padding: 20px;
    background-color: #56d176;
  }
}
</style>